<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 商家模板 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-radio-group v-model="actionRadio" size="small" style="width:100%;">
        <div class="ul">
          <div class="li" v-for="(item,i) in tabledata" :key='item.stId'>
            <el-image style="width: 250px; height: 375px" :src="item.stTemplateUrl" fit="fill"></el-image>
            <div style="margin-bottom:20px;text-align:center;">
              <el-radio :label="item.stId" border class="radio_title" @change="checkedSub" v-loading="checkLoad">{{'模板'+i}}</el-radio>
            </div>
          </div>
        </div>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import { businessTemplateGetList, businessTemplateGetCheckedSub } from '../../../api/index';

export default {
  data() {
    return {
      actionRadio: '',
      checkLoad: false,
      tabledata: [],
    };
  },
  created() {
    this.getInit();
  },
  methods: {
    //初始化获取模板
    getInit() {
      businessTemplateGetList().then((res) => {
        if (res.code == 0) {
          this.tabledata = res.list;
          res.list.forEach((item, i) => {
            if (item.stIsChecked == 1) {
              this.actionRadio = item.stId;
            }
          })
        } else {
          this.$message(res.msg);
        }
      })
    },
    //选中模板
    checkedSub() {
      this.checkLoad = true;
      businessTemplateGetCheckedSub({ stId: this.actionRadio }).then((res) => {
        this.checkLoad = false;
        if (res.code == 0) {
          this.$message.success("选中成功");
        } else {
          this.$message(res.msg);
        }
      })
    }
  }
};
</script>

<style scoped>
.radio_title {
    margin-top: 20px;
}
.ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.li {
    width: 23%;
    margin-right: 2%;
}
.li > div {
    display: block;
    width: 100% !important;
    height: auto !important;
}
</style>
